<template>
  <el-form :model="detailForm" ref="detailForm" :label-position="labelPosition">
    <el-card class="box-card" shadow="never">
      <div slot="header">
        <span>三者定损</span>
      </div>
      <el-row :gutter="24">
        <el-col :span="24">
          <el-table size="mini" :data="detailForm.threeLossAssessmentDtoList" border style="width: 100%"
            :header-cell-class-name="headerClass">

            <el-table-column align="center" label="操作" width="68" v-if="isEdit" fixed="left">
              <template #default="{row,$index}">
                <el-button size="mini" type="text" @click="delThreeLoss(row, $index)">删除</el-button>
              </template>
            </el-table-column>
            <el-table-column type="index" width="55" align="center" label="序号" />
            <el-table-column align="center" label="三者车牌号" min-width="140" prop="otherCarNo">
              <template #default="{row,$index}">
                <el-form-item class="formTable" :prop="'threeLossAssessmentDtoList.'+$index+'.otherCarNo'"
                  :rules="{required: state === 'write' && detailForm.accidentType == 2,  trigger: 'blur'}">
                  <el-input v-model="row.otherCarNo" v-if="isEdit" size="mini"></el-input>
                  <span v-else>{{ row.otherCarNo }}</span>
                </el-form-item>
              </template>
            </el-table-column>
            <el-table-column align="center" label="三者定损金额" min-width="140" prop="otherAssessmentPrice">
              <template #default="{row,$index}">
                <el-form-item class="formTable">
                  <span>{{ format_thousand(handleOtherAssessmentPrice(row, $index)) }}</span>
                </el-form-item>
              </template>
            </el-table-column>
            <el-table-column align="center" label="物损金额" min-width="140" prop="damagePrice">
              <template #default="{row,$index}">
                <el-form-item class="formTable" :prop="'threeLossAssessmentDtoList.'+$index+'.damagePrice'"
                  :rules="{required: state === 'write' && detailForm.accidentType == 2,  trigger: 'blur'}">
                  <el-input v-model="row.damagePrice" v-if="isEdit" v-thousand
                    @change="changeThreeLoss(row, $index, 'damagePrice')" size="mini"></el-input>
                  <span v-else>{{ format_thousand(row.damagePrice) }}</span>
                </el-form-item>
              </template>
            </el-table-column>
            <el-table-column align="center" label="人伤金额" min-width="140" prop="personPrice">
              <template #default="{row,$index}">
                <el-form-item class="formTable" :prop="'threeLossAssessmentDtoList.'+$index+'.personPrice'"
                  :rules="{required: state === 'write' && detailForm.accidentType == 2,  trigger: 'blur'}">
                  <el-input v-model="row.personPrice" v-if="isEdit" size="mini" v-thousand
                    @change="changeThreeLoss(row, $index, 'personPrice')"></el-input>
                  <span v-else>{{ format_thousand(row.personPrice) }}</span>
                </el-form-item>
              </template>
            </el-table-column>
            <el-table-column align="center" label="施救费用" min-width="140" prop="rescueCost">
              <template #default="{row,$index}">
                <el-form-item class="formTable" :prop="'threeLossAssessmentDtoList.'+$index+'.rescueCost'"
                  :rules="{required: state === 'write' && detailForm.accidentType == 2,  trigger: 'blur'}">
                  <el-input v-model="row.rescueCost" v-if="isEdit" @change="changeThreeLoss(row, $index, 'rescueCost')"
                    size="mini" v-thousand></el-input>
                  <span v-else> {{ format_thousand(row.rescueCost) }}</span>
                </el-form-item>
              </template>
            </el-table-column>
            <el-table-column align="center" label="其他" min-width="140" prop="threeOther">
              <template #default="{row}">
                <el-input v-model="row.threeOther" @change="changeThreeLoss(row, $index, 'threeOther')" v-if="isEdit"
                  size="mini" v-thousand></el-input>
                <span v-else>
                  {{ format_thousand(row.threeOther) }}
                </span>
              </template>
            </el-table-column>
            <template v-slot:append v-if="state === 'write'">
              <div class="flex-xy-center" style="height: 30px">
                <e-button type="text" @click="addThreeLoss">
                  新增
                </e-button>
              </div>
            </template>
          </el-table>
        </el-col>
      </el-row>
      <el-row :gutter="24" style="margin-top: 20px">
        <el-col :span="24">
          <el-form-item label="上传附件:">
            <image-common v-model="detailForm.threeLossAssessmentUrl" :disabled="!isEdit" :upType="2" />
          </el-form-item>
        </el-col>
      </el-row>

    </el-card>
  </el-form>
</template>

<script>
export default {
  name: "threeAssessment", //三者定损
  props: {
    value: {
      type: Object,
      default: {},
    },
    state: {
      type: String,
      default: "",
    },
  },
  computed: {
    detailForm: {
      get() {
        let that = this;
        const proxy = new Proxy(that.value, {
          get(target, key, value) {
            return Reflect.get(target, key);
          },
          set(target, key, value) {
            that.$emit("input", { ...target, [key]: value });
            return true;
          },
        });
        return proxy;
      },
    },
    labelPosition() {
      if (this.isEdit) {
        return "top";
      } else {
        return "right";
      }
    },
    isEdit() {
      let bool;
      switch (this.state) {
        case "write":
          bool = true;
          break;
        case "disabled":
          bool = false;
          break;
        case "readonly":
          bool = false;
          break;
      }
      return bool;
    },
  },
  watch: {},
  data() {
    return {
      headerThreeLossAssessmentDtoList: [
        "personPrice",
        "rescueCost",
        "damagePrice",
        "otherAssessmentPrice",
        "otherCarNo",
      ],
    };
  },
  created() {},
  mounted() {},
  methods: {
    handleOtherAssessmentPrice(val, index) {
      let num = 0;
      num =
        Number(val.damagePrice) +
        Number(val.personPrice) +
        Number(val.rescueCost) +
        Number(val.threeOther);
      this.$set(
        this.value.threeLossAssessmentDtoList[index],
        "otherAssessmentPrice",
        num
      );
      return num;
    },

    changeThreeLoss(row, key, field) {
      let msg = /^(?:[1-9]\d*|0)(?:\.\d+)?$/;
      // if (field == "price") {
      if (msg.test(Number(row[field]))) {
        if (Number(row[field]) >= 0) {
          let _value = row[field].toString().match(/^\d+(?:\.\d{0,2})?/)[0];
          row[field] = _value;
        } else {
          row[field] = "";
        }
      } else {
        row[field] = "";
      }
      // }
    },

    addThreeLoss() {
      let obj = {
        personPrice: "",
        rescueCost: "",
        damagePrice: "",
        otherAssessmentPrice: "",
        otherCarNo: "",
        threeOther: "",
      };
      this.detailForm.threeLossAssessmentDtoList.push(obj);
    },

    delThreeLoss(row, key) {
      this.detailForm.threeLossAssessmentDtoList.splice(key, 1);
    },
    headerClass({ row, column, rowIndex, columnIndex }) {
      for (let i = 0; i < row.length; i++) {
        if (
          this.headerThreeLossAssessmentDtoList.includes(row[i].property) &&
          i == columnIndex &&
          this.isEdit &&
          this.value.accidentType == 2
        ) {
          return "header-class";
        }
      }
    },

    handleEffect() {
      return new Promise((resolve, reject) => {
        this.$refs.detailForm.validate((valid) => {
          if (valid) {
            resolve();
          } else {
            this.locateToErr();
            reject();
          }
        });
      });
    },

    locateToErr() {
      this.$nextTick(() => {
        let isError = document.getElementsByClassName("is-error");
        isError[0].scrollIntoView({
          // 滚动到指定节点
          // 值有start,center,end，nearest，当前显示在视图区域中间
          block: "center",
          // 值有auto、instant,smooth，缓动动画（当前是慢速的）
          behavior: "smooth",
        });
      });
    },

    valid() {
      return new Promise((resolve) => {
        this.$refs.detailForm.validate((valid) => {
          resolve(valid);
        });
      });
    },
  },
};
</script>

<style scoped lang="scss">
.box-card {
  margin-bottom: 20px;
}

::v-deep .header-class {
  .cell::before {
    content: "*";
    color: red;
    padding-right: 2px;
    font-size: 14px;
  }
}

::v-deep.formTable {
  margin-bottom: 0;
}
</style>


